<!DOCTYPE html>
<html>
  <head>
    <title>图片裁剪</title>
    <meta charset="utf-8" />
    <meta name="description" content="图片裁剪,image clip">
    <meta name="keywords" content="图片裁剪,截图,图片,canvas,image,image clip">
    <meta name="author" content="weichaozhan">
    <link rel="shortcut icon" href="../favicon.ico" />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="container" >
      <div>
        <div class="editor" >
          <div id="canvas-wrapper" >
  
            <canvas id="canvas" width="500" height="500" >
            </canvas>
      
            <div id="imgClip" >
              <div class="imgClip-resize imgClip-resize-left-top" data-x="-1" data-y="-1" ></div>
              <div class="imgClip-resize imgClip-resize-top" data-x="0" data-y="-1" ></div>
              <div class="imgClip-resize imgClip-resize-right-top" data-x="1" data-y="-1" ></div>
              <div class="imgClip-resize imgClip-resize-left" data-x="-1" data-y="0" ></div>
              <div class="imgClip-resize imgClip-resize-right" data-x="1" data-y="0" ></div>
              <div class="imgClip-resize imgClip-resize-left-bottom" data-x="-1" data-y="1" ></div>
              <div class="imgClip-resize imgClip-resize-bottom" data-x="0" data-y="1" ></div>
              <div class="imgClip-resize imgClip-resize-right-bottom" data-x="1" data-y="1" ></div>
    
              <div class="clip-area-action" >
                <button id="clip-btn" title="裁剪" >
                  <svg class="icon-symbol icon-symbol--scissors" aria-hidden="true">
                    <use xlink:href="#icon-scissors"></use>
                  </svg>
                </button>
                
                <button id="save-btn" class="btn-disabled" disabled title="保存" >
                  <svg class="icon-symbol" aria-hidden="true">
                    <use xlink:href="#icon-download"></use>
                  </svg>
                </button>
              </div>
            </div>
          </div>
          
          <div class="toolbar" >
            <input id="upload" type="file" accept=".jpg,.jpeg,.png,.gif" />
      
            <button id="upload-btn" title="上传" >
              <svg class="icon-symbol" aria-hidden="true">
                <use xlink:href="#icon-48upload"></use>
              </svg>
            </button>
      
            <button id="vertical-flip-btn" title="垂直翻转" >
              <svg class="icon-symbol" aria-hidden="true">
                <use xlink:href="#icon-flip-vertical"></use>
              </svg>
            </button>
      
            <button id="horizontal-flip-btn" title="垂直翻转" >
              <svg class="icon-symbol" aria-hidden="true">
                <use xlink:href="#icon-flip-horizontal"></use>
              </svg>
            </button>

            <div class="rotate-item-wrapper" >
              <span>
                <svg class="icon-symbol" aria-hidden="true">
                  <use xlink:href="#icon-rotate"></use>
                </svg>
                旋转：
              </span>
              
              <i class="rotate-wrapper disabled" >
                <i class="rotate" >
                  <e class="rotate-tip" >0 deg</e>
                </i>
              </i>
            </div>
          </div>
        </div>
      </div>

      <div class="preview-layout" >
        <div class="preview-wrapper" >
          <canvas id="preview" >
          </canvas>
        </div>
      </div>
    </div>

    <footer class="footer" >
      <a class="github-link" href="https://github.com/weichaozhan/ImageClip" >
        <span class="github-icon" ></span>
        <span>Home Page</span>
      </a>
    </footer>

    <script src="./font/icon/iconfont.js"></script>
    <script src="./index.js" ></script>
    <script src="./canvas.js" ></script>
    <script src="./rotate.js" ></script>
  </body>
</html>